defaultValue を変更しても DOM に反映されないコンポーネントへの対処
React の <input /> は defaultValue という props を持っている
これは Uncontrollable な (= value と onChange をセットしていない) 場合のデフォルト値として利用できる
本来の React の input 要素では defaultValue が変更されたときに DOM にも反映される
MUI など React の input 要素をラップしたライブラリでは、DOM に反映されない実装になっていることがある defaultValue が非同期的に取得される場合 (e.g. 現在のユーザー名を取得してから変更させたい) 、
再現
https://gyazo.com/56a2c02004879054ae915834c1a23179
対処方法
defaultValue が読み込み中の間は要素を描画しない
更新されうるのであれば、こちらの方が安全
代わりにインジケータか何かを描画しておく
別の対処方法
defaultValue が変更されたら Unmount して、もう一度 Mount するラッパーコンポーネントを作る
code:Main.jsx
function Main () {
return (
<UnmountOnChange value={defaultValue}>
<TextInput defaultValue={defaultValue} />
</UnmountOnChange>
);
}
code:UnmountOnChange.jsx
function Component ({ value, children }) {
const forceUpdate = useReducer(i => i + 1, 0)1; const previousValue = useRef(value);
const isValueChanged = previousValue.current !== value;
previousValue.current = value;
useEffect(() => {
if (isValueChanged) {
forceUpdate();
}
});
return isValueChanged ? null : children;
}
この方法であれば最初からコンポーネントを描画できる